// A special selector to increase the specificity in order to override reach ui styles
// for the list-box button element.
.option[data-reach-listbox-option] {
    display: flex;
    align-items: baseline;
    padding: 0.25rem 0.75rem;
    cursor: pointer;

    &[data-current] {
        font-weight: normal;
        background-color: var(--color-bg-3);
    }

    &[aria-selected] {
        background-color: var(--link-color);
        color: var(--light-text);
    }
}

.text {
    padding-right: 0.5rem;
}

.badge {
    // This badge max-width value should be synced with menu button badge max-width
    max-width: 8rem;
    flex-shrink: 0;
}
